<template>
    <div class="isMask">
        <div class="isMask_mask" @click="cencleClick"></div>
        <div class="isMask_Content" @click="">
            <div class="isMask_Content_Header">
                <text class="isMask_Content_Header_Title">配送人员</text>
                <icon content="md-close-circle" class="isMask_Content_Header_Icon" @click="cencleClick"></icon>
            </div>
            <list>
                <cell>
                    <div class="shop_box" v-for="(item,index) in personnelList" @click="chooseClick(index,item)">
                        <div>
                            <text class="shop_name">{{item.name}}</text>
                        </div>
                        <div :class="[index == personnelIndex ?'isMask_Content_Content_IconBox':'isMask_Content_Content_No_IconBox']">
                            <icon content="md-checkmark" class="isMask_Content_Content_Icon"></icon>
                        </div>
                    </div>
                    <div style="width: 750px;height: 100px"></div>
                </cell>
            </list>
            <div class="isMask_Botton">
                <div class="isMask_Botton_Box botton_Bg_Color" @click="completeClick">
                    <text class="isMask_Botton_Title botton_Fz_Color">完成</text>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {list} from '@/api/sysEmployee.js'
    export default {
        data(){
            return{
                personnelList: [],
                from:{},
            }
        },
        props:[
            'personnelIndex'
        ],
        created(){
            this.loadList()
        },
        mounted(){

        },
        methods:{
            loadList(){
                var _this = this
                list().then(res => {
                    _this.personnelList = res.data.data
                    _this.from = res.data.data[0]
                })
            },
            chooseClick(index,item) {
                var _this = this
                _this.personnelIndex = index
                _this.from = item
            },
            completeClick(){
                var from={
                    from:this.from,
                    personnelIndex:this.personnelIndex
                }
                this.$emit('completePersonnel',from)
            },
            cencleClick(){
                var cencleDelivery = { cencleDelivery: false };
                this.$emit('cenclePersonnel',cencleDelivery)
            }
        },
    }
</script>
<style lang="css" src="../../../../style/wx.css"/>
<style scoped>
    .isMask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3);
        z-index: 999
    }
    .isMask_mask{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.3)
    }
    .isMask_Content {
        width: 750px;
        height: 800px;
        background-color: white;
        position: fixed;
        bottom: 0;
        padding: 20px;
        box-sizing: border-box;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }

    .isMask_Content_Header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        position: relative;
        margin-bottom: 50px;
    }

    .isMask_Content_Header_Title {
        font-size: 30px;
    }

    .isMask_Content_Header_Icon {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 50px;
        height: 35px;
    }

    .isMask_Content_Content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .isMask_Content_Content_Title {
        font-size: 24px;
    }

    .isMask_Content_Content_IconBox {
        width: 30px;
        height: 30px;
        border-radius: 50px;
        /* background-image: linear-gradient(to bottom, rgba(233, 88, 79, 1), rgba(241, 114, 80, 1)); */
        background-color: rgba(233, 88, 79, 1);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Content_Content_No_IconBox{
        width: 30px;
        height: 30px;
        border-radius: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.3);
    }

    .isMask_Botton {
        width: 750px;
        position: absolute;
        bottom: 30px;
        left: 0;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        /* color: white; */
    }

    .isMask_Content_Content_Icon{
        width: 30px;
        height: 30px;
        color: white;
        font-size: 24px;
    }
    .shop_box{
        padding-top: 20px;
        padding-bottom: 20px;
		padding-right: 13px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(0,0,0,0.2);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .shop_name{
        font-size: 32px;
    }
</style>
